<template>

    <div id="music_index">
        <div>
            <p class="tittle_p">推荐歌曲</p>
        </div>

        <div class="rec-song" >
                <a-carousel
                 style="
                 width: 880px;
                height: 400px; position: absolute; left:50%; margin-left: -440px
                "
                 :auto-play="true"
                indicator-type="dot"
                show-arrow="hover"
                 >
                        <a-carousel-item v-for="image in images">
                            <img    
                             :src="image"
                             :style="{
                                width: '100%',
                                height:'100%'
                                }"
                />
                        </a-carousel-item>
                </a-carousel>
        </div>
    
    </div>
</template>

<script setup>
import { ref} from 'vue'
const images = [
      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
      'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
    ];

function handleChange (value) {
    console.log(value)
}
</script>

<style scoped>
*{
}
.tittle_p{
    font-size: 20px;
    margin-top: 50px;
    text-align: center;
    margin-bottom: 20px;
}

#music_inde{
    overflow: scroll;
}
.rec-song{
    position: relative; 
    width: 1000px;
    margin: auto;
    height: 500px;
    overflow:scroll;
}
.rec-song::-webkit-scrollbar{
    display: none;
}

</style>
